//--------------------------- 设置海量点 -----------------------------
function setMassMark(data) {
    let title = '黑广播';
    let content = '';
    let infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title, content),
        offset: new AMap.Pixel(16, -45)
    });


    let style = [
        {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
        }
    ];
    let mass = new AMap.MassMarks(data, {
        opacity: 0.8,
        zIndex: 111,
        cursor: 'pointer',
        style: style
    });
    mass.on('mouseover', function (e) {
        let data = e.data.data;
        let address = e.data.Address;
        let lnglat = e.data.lnglat;
        let info_ = '<div  style="border-bottom: solid;border-color: white"><div class="indexInfoFont">' + address + '</div></div>';
        for (let item in data) {
            if (!data.hasOwnProperty(item)) continue;
            let infoData = data[item];
            // alert(infoData.Channel);
            info_ += "<span class='indexInfoFont'>频点：" + infoData.Channel + " " + "</span>";
            info_ += "<span class='indexInfoFont'>" + infoData.Time.replace('T', ' ') + " </span>";
            info_ += "<span class='indexInfoFont'>" + infoData.Category__Name + "</span></br>";
        }
        infoWindow.setContent(updateInfoWindow('黑广播', info_));
        infoWindow.open(map, lnglat);
    });
    mass.on('mouseout', function () {
        closeInfoWindow();
    });
    mass.on('click', function (e) {
        let lnglat = e.data.lnglat;
        map.setZoom(15);
        map.setCenter(lnglat);
    });
    mass.setMap(map);

}

//--------------------------- 获取数据 -------------------------------
axios.get('/d/bigscreen/massmark').then(function (response) {
    setMassMark(response.data.data);
});

//--------------------------- 信息窗口 -------------------------------


function createInfoWindow(title, content) {
    var info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";

    //可以通过下面的方式修改自定义窗体的宽高
    //info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement("div");
    var titleD = document.createElement("div");
    var closeX = document.createElement("img");
    top.className = "info-top";
    titleD.innerHTML = title;
    closeX.src = "https://webapi.amap.com/images/close2.gif";
    closeX.onclick = closeInfoWindow;

    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);

    // 定义中部内容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = 'rgb(0,0,0,0.5)';
    middle.innerHTML = content;
    info.appendChild(middle);

    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    var sharp = document.createElement("img");
    sharp.src = "https://webapi.amap.com/images/sharp.png";
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
}

//动态更新信息窗口
function updateInfoWindow(title, content) {
    return createInfoWindow(title, content);
}

//关闭信息窗体
function closeInfoWindow() {
    map.clearInfoWindow();
}